<template>
  <date-picker-component></date-picker-component>
</template>

<script setup lang="tsx">
import { DatePicker, FormItem } from 'tdesign-vue-next';
import { inject, Ref } from 'vue';

import { TDFormItemType } from '../type.d';

const {
  componentAttribute = {},
  formItemAttribute = {},
  name,
} = defineProps<{
  componentAttribute: TDDatePickerType;
  name: string;
  formItemAttribute: TDFormItemType;
}>();

type TDDatePickerType = InstanceType<typeof DatePicker>['$props'];

const defaultComponentAttribute: TDDatePickerType = {
  placeholder: `请选择${formItemAttribute.label || ''}`,
  clearable: true,
  style: { width: '100%' },
};
const defaultFormItemAttribute: TDFormItemType = {
  name,
  rules: [
    {
      required: true,
      message: `${formItemAttribute.label || '此项'}必填`,
      trigger: 'change',
    },
    {
      validator: (value: string) => ({
        result: value.length > 0,
        message: `${formItemAttribute.label || '此项'}必填`,
        type: 'error',
      }),
    },
  ],
};

const modelValue: Ref = inject('dynamicFormData');

const DatePickerComponent = (
  <FormItem {...defaultFormItemAttribute} {...formItemAttribute}>
    <DatePicker v-model={modelValue.value[name]} {...defaultComponentAttribute} {...componentAttribute} />
  </FormItem>
);
</script>

<style scoped></style>
